<template>
	<view>Bannertest</view>
	<view v-for="(item, index) in banners" :key="index" class="testimagbox">
		<image :src="item.pic" mode="aspectFill" class="banner-image"></image>
	</view>

	<view>获取商品</view>
	<view class="shop">
		<view v-for="(item, index) in shops" :key="index" class="shopbox">
			<image class="shopimg" :src="item.brand_logo"></image>
			<view class="shopname">{{item.brand_name}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shops: [], // 用于存储商品数据的数组
				banners: [], // 用于存储Banner数据的数组
			}
		},
		
		// 生命周期钩子 页面加载时调用方法
		onLoad() {
			this.getShop();
			this.getBanner();
		},
		methods: {
			getBanner() {
				uni.request({
					url: 'https://manage.jwk2022.cn/openapiv2/index/getBanner', // 开发者服务器接口地址
					method: 'POST', // 请求方式
					data: {
						'login_devid': '',
						'admin_userid': '1',
						'appid': '',
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded' // 默认值
					}, // 设置请求的 header
					success: (res) => {
						// 请求成功的回调
						if (res.data.code === 1) {
							this.banners = res.data.data; // 将获取到的Banner数据赋值给banners数组
							console.log(res.data);
						} else {
							console.error('获取Banner数据失败');
						}
					},
					fail: (err) => {
						// 请求失败的回调
						console.error(err);
					},
					complete: () => {
						// 请求完成的回调（无论成功或失败都会执行）
					}
				});
			},
			getShop() {
				uni.request({
					url: 'https://manage.jwk2022.cn/openapiv2/index/getJdPddBrand',
					method: 'POST',
					data: {
						cate_id: '1',
						source_type: 'pdd',
						// 'appid': '',
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: (res) => {
						if (res.data.code === 1) {
							this.shops = res.data.data;
							console.log(this.shops); // 打印获取到的商品数据
						} else {
							console.error('获取Shop数据失败');
						}
					},
					fail: (err) => {
						console.error(err);
					},
					complete: () => {}
				});
			}
		}
	}
</script>

<style>
	.testimagbox {
		width: 100%;
	}

	.banner-image {
		/* width: 50%; */
		height: 15vh;
		display: block;
		margin: 0 auto;
	}

	.shop {
		padding: 2%;
		display: flex;
		flex-wrap: wrap;
		gap: 2%;
	}

	.shopbox {
		width: 48%;
	}

	.shopname {
		font-size: 15px;
		text-align: center;
	}

	.shopimg {
		width: 100%;
		height: 150px;
	}
</style>
